let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value);
console.log(myLeads)
})
let arr = [2, 3, "fadf"]
/*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/
for(let i = 0; i < myLeads.length; i++){
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>save leads</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<input type="text" id="input-el">
<button id="input-btn">Save tabs</button>
<ul id="ul-el"></ul>
<script src="/index.js"></script>
</body>
</html>Put the loop in a function and call it. Also make sure to reset the ul to be empty
let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value);
updateList();
})
let arr = [2, 3, "fadf"]
/*arr[] elements are rendered correctly in HTML list. But myLeads[] elements are not rendered in HTML list, as they are printed correctly in console.*/
function updateList(){
ulEl.innerHTML = "";
for(let i = 0; i < myLeads.length; i++){
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>save leads</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<input type="text" id="input-el">
<button id="input-btn">Save tabs</button>
<ul id="ul-el"></ul>
<script src="/index.js"></script>
</body>
</html>You are not updating the HTML element anywhere when the click event is being fired. That means your list is only populated by the initial elements of myLeads when the page is refreshed and then never again.
Move the cycle for generating li elements into a function, for example
function updateList(arr){
ulEl.innerHTML = "";
for(let i = 0; i < arr.length; i++){
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}
}
and then call it inside the event handler
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value);
console.log(myLeads)
updateList(myLeads);
})